<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>扩展多图上传+cropper 图片截取 dlimg - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="基于 layui，多图片上传后可移动图片位置，根据cropper修改的图片截取（剪裁）上传插件(参考@adminxf单图片)"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>扩展多图上传+cropper 图片截取</a> <span class="layui-badge layui-bg-green layui-hide-xs">dlimg</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/29275176/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">天才**猫</cite> <img src="/qqapp/101235792/9AAB0FC3E5CABAA8CFCAEC427E7E2049/100" alt="天才**猫"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>基于 layui，多图片上传后可移动图片位置，根据cropper修改的图片截取（剪裁）上传插件(参考@adminxf单图片)</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">创建：2019-3-9 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        实例:
       <br>html
       <br>
       <pre>&lt;div class="layui-tab layui-tab-card"&gt;<br>            &lt;div class="layui-form" style="padding: 20px 0 0 0;"&gt;     <br>                &lt;div class="layui-form-item"&gt;<br>                    &lt;label class="layui-form-label"&gt;图片上传&lt;/label&gt;<br>                    &lt;div class="layui-input-inline"&gt;<br>                        &lt;div class="layui-upload-list layui-icon" id="addZmImg"&gt;<br>                            <br>                        &lt;/div&gt;<br>                    &lt;/div&gt;<br>                &lt;/div&gt;<br>                &lt;div class=""&gt;<br>                    &lt;ul id="imgZmList"&gt;&lt;/ul&gt;<br>                &lt;/div&gt;<br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>        &lt;div id="cropperdiv"&gt;&lt;/div&gt;</pre>js：
       <br>
       <pre>&lt;script&gt;<br>        layui.config({<br>            base: "../../static/js/"<br>        })<br>        layui.use(['form', 'upload'], function () {<br>            var form = layui.form<br>                , $ = layui.jquery<br>                , upload = layui.upload;<br><br>            //证明多图片上传<br>            upload.render({<br>                elem: '#addZmImg'<br>                , url: '上传路径'<br>                , multiple: true<br>                , before: function (obj) {<br>                    //预读本地文件示例，不支持ie8<br>                    obj.preview(function (index, file, result) {<br>                        $('#imgZmList').append('&lt;li style="position:relative"&gt;&lt;img name="imgZmList" src="' + result + '"width="150" height="113"&gt;&lt;div class="title_cover" name="imgZmName" onclick="divClick(this)"&gt;&lt;/div&gt;&lt;div class="img_edit layui-icon" onclick="croppers_pic(this)"&gt;&lt;/div&gt;&lt;div class="img_close" onclick="deleteElement(this)"&gt;X&lt;/div&gt;&lt;/li&gt;');<br>                        form.render();<br>                        imgMove("imgZmList");<br>                    });<br>                }<br>                , done: function (res) {<br>                    //上传完毕<br>                }<br>            });<br>        });<br>function croppers_pic(obj) {<br>    var src = obj.parentNode.childNodes["0"].src;<br>    layui.use(["croppers"], function () {<br>        var croppers = layui.croppers;<br>        croppers.render({<br>            area: ['900px', '600px']  //弹窗宽度<br>            , imgUrl: src<br>            , url: "/user/upload.asp"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样<br>            , done: function (url) { //上传完毕回调<br>                //更改图片src<br>                obj.parentNode.childNodes["0"].src = url;<br>            }<br>        });<br>    });<br>}<br>    &lt;/script&gt;</pre> publishImg.js
       <br>
       <pre>//图片移动<br>function imgMove(obj) {<br>    var oUl = document.getElementById(obj);<br>    var aLi = oUl.getElementsByTagName("li");<br>    var disX = 0;<br>    var disY = 0;<br>    var minZindex = 1;<br>    var aPos = [];<br>    var leftbz = 0;<br>    var topbz = 0;<br>    for (var i = 0; i &lt; aLi.length; i++) {<br>        if (leftbz == 5) {<br>            leftbz = 1;<br>            topbz += 1;<br>            var fdiv = (topbz + 1) * 140;<br>            oUl.style.height = fdiv + 'px';<br>        }<br>        else {<br>            leftbz += 1;<br>        }<br>        //var l = aLi[i].offsetLeft;<br>        //var t = aLi[i].offsetTop;<br>        //此处注意，我是按照控件算出来的。尴尬。。。/(ㄒoㄒ)/~~<br>        var l = 170 * (leftbz - 1) + 10;<br>        var t = 130 * topbz;<br><br>        aLi[i].style.top = t + "px";<br>        aLi[i].style.left = l + "px";<br>        aPos[i] = { left: l, top: t };<br>        aLi[i].index = i;<br><br><br>    }<br>    for (var i = 0; i &lt; aLi.length; i++) {<br>        aLi[i].style.position = "absolute";<br>        aLi[i].style.margin = 0;<br>        setDrag(aLi[i]);<br>    }<br>    //拖拽<br>    function setDrag(obj) {<br>        obj.onmouseover = function () {<br>            obj.style.cursor = "move";<br>        }<br>        obj.onmousedown = function (event) {<br>            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br>            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;<br>            obj.style.zIndex = minZindex++;<br>            //当鼠标按下时计算鼠标与拖拽对象的距离<br>            disX = event.clientX + scrollLeft - obj.offsetLeft;<br>            disY = event.clientY + scrollTop - obj.offsetTop;<br>            document.onmousemove = function (event) {<br>                //当鼠标拖动时计算div的位置<br>                var l = event.clientX - disX + scrollLeft;<br>                var t = event.clientY - disY + scrollTop;<br>                obj.style.left = l + "px";<br>                obj.style.top = t + "px";<br>                /*for(var i=0;i&lt;aLi.length;i++){<br>                    aLi[i].className = "";<br>                    if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线<br>                    if(colTest(obj,aLi[i])){<br>                        aLi[i].className = "active";<br>                    }<br>                }*/<br>                for (var i = 0; i &lt; aLi.length; i++) {<br>                    aLi[i].className = "";<br>                }<br>                var oNear = findMin(obj);<br>                if (oNear) {<br>                    oNear.className = "active";<br>                }<br>            }<br>            document.onmouseup = function () {<br>                document.onmousemove = null;//当鼠标弹起时移出移动事件<br>                document.onmouseup = null;//移出up事件，清空内存<br>                //检测是否普碰上，在交换位置<br>                var oNear = findMin(obj);<br>                if (oNear) {<br>                    oNear.className = "";<br>                    oNear.style.zIndex = minZindex++;<br>                    obj.style.zIndex = minZindex++;<br>                    startMove(oNear, aPos[obj.index]);<br>                    startMove(obj, aPos[oNear.index]);<br>                    //交换index<br>                    oNear.index += obj.index;<br>                    obj.index = oNear.index - obj.index;<br>                    oNear.index = oNear.index - obj.index;<br>                } else {<br><br>                    startMove(obj, aPos[obj.index]);<br>                }<br>            }<br>            clearInterval(obj.timer);<br>            return false;//低版本出现禁止符号<br>        }<br>    }<br>    //碰撞检测<br>    function colTest(obj1, obj2) {<br>        var t1 = obj1.offsetTop;<br>        var r1 = obj1.offsetWidth + obj1.offsetLeft;<br>        var b1 = obj1.offsetHeight + obj1.offsetTop;<br>        var l1 = obj1.offsetLeft;<br><br>        var t2 = obj2.offsetTop;<br>        var r2 = obj2.offsetWidth + obj2.offsetLeft;<br>        var b2 = obj2.offsetHeight + obj2.offsetTop;<br>        var l2 = obj2.offsetLeft;<br><br>        if (t1 &gt; b2 || r1 &lt; l2 || b1 &lt; t2 || l1 &gt; r2) {<br>            return false;<br>        } else {<br>            return true;<br>        }<br>    }<br>    //勾股定理求距离<br>    function getDis(obj1, obj2) {<br>        var a = obj1.offsetLeft - obj2.offsetLeft;<br>        var b = obj1.offsetTop - obj2.offsetTop;<br>        return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));<br>    }<br>    //找到距离最近的<br>    function findMin(obj) {<br>        var minDis = 999999999;<br>        var minIndex = -1;<br>        for (var i = 0; i &lt; aLi.length; i++) {<br>            if (obj == aLi[i]) continue;<br>            if (colTest(obj, aLi[i])) {<br>                var dis = getDis(obj, aLi[i]);<br>                if (dis &lt; minDis) {<br>                    minDis = dis;<br>                    minIndex = i;<br>                }<br>            }<br>        }<br>        if (minIndex == -1) {<br>            return null;<br>        } else {<br>            return aLi[minIndex];<br>        }<br>    }<br>}<br>//图片删除<br>function deleteElement(Obj) {<br>    Obj.parentNode.parentNode.removeChild(Obj.parentNode);<br>}<br>//描述<br>function divClick(obj) {<br>    layer.prompt({ title: '请填新的描述，并确认', formType: 2 }, function (text, index) {<br>        obj.innerHTML = text;<br>        layer.close(index);<br>    });<br>}<br><br>//图片裁剪<br>layui.config({<br>    base: "../../static/js/"<br>}).extend({<br>    "croppers": "croppers"<br>});<br>function croppers_pic(obj) {<br>    var src = obj.parentNode.childNodes["0"].src;<br>    layui.use(["croppers"], function () {<br>        var croppers = layui.croppers;<br>        croppers.render({<br>            area: ['900px', '600px']  //弹窗宽度<br>            , imgUrl: src<br>            , url: "/user/upload.asp"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样<br>            , done: function (url) { //上传完毕回调<br>                //更改图片src<br>                obj.parentNode.childNodes["0"].src = url;<br>            }<br>        });<br>    });<br>}</pre>展示：
       <br>
       <img src="/upload/2019_2/29275176_1550469094371_33994.png"> 
       <br>
       <img src="/upload/2019_2/29275176_1550469236521_90938.png"> 
       <br> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/29275176_1550469512872_26847.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>